import React from 'react'
import './thirteen.css'

function Thirteen() {
  const solutions = [
    {
      id: 1,
      title: '个人VIP',
      icon: '💎',
      color: 'yellow',
      buttonColor: 'yellow-orange',
      scenarios: '仅限个人学习、交流使用',
      commercialRights: '不可商用',
      benefits: '相关素材高速下载、专属客服及时响应、在线发票申请'
    },
    {
      id: 2,
      title: '企业VIP',
      icon: '👑',
      color: 'grey',
      buttonColor: 'grey-blue',
      scenarios: '用于企业的线上宣传、线下物料活动、广告传媒用途、转售品用途等',
      commercialRights: '企业可商用',
      benefits: '相关素材高速下载、专属客服及时响应、在线发票申请'
    },
    {
      id: 3,
      title: '在线设计',
      icon: '💎',
      color: 'orange',
      buttonColor: 'orange-red',
      scenarios: '无需设计能力,线上编辑、快速出图',
      commercialRights: '个人可商用',
      benefits: '相关素材高速下载、专属客服即时响应、在线发票申请'
    },
    {
      id: 4,
      title: '融媒体VIP',
      icon: '💎',
      color: 'red',
      buttonColor: 'red-pink',
      scenarios: '行政事业单位用于网络媒体、传统媒体、活动物料、广告投放等',
      commercialRights: '行政事业单位可商用',
      benefits: '相关素材高速下载、专属客服即时响应、在线发票申请'
    }
  ]

  return (
    <div className="enterprise-solutions">
      <div className="solutions-header">
        <h1 className="main-title">选择适合您团队/企业的解决方案</h1>
        <div className="watermark">ENTERPRISE SOLUTIONS</div>
      </div>
      
      <div className="solutions-grid">
        {solutions.map((solution) => (
          <div key={solution.id} className={`solution-card ${solution.color}`}>
            <div className="card-watermark">DESIGN</div>
            
            <div className="card-icon">
              <div className={`icon-container ${solution.color}`}>
                {solution.icon}
              </div>
            </div>
            
            <h2 className="card-title">{solution.title}</h2>
            
            <button className={`join-button ${solution.buttonColor}`}>
              立即加入
            </button>
            
            <div className="card-details">
              <div className="detail-item">
                <h3>适用场景</h3>
                <p>{solution.scenarios}</p>
              </div>
              
              <div className="detail-item">
       
                <h3>商用权益</h3>
                <p>{solution.commercialRights}</p>
              </div>
              
              <div className="detail-item">
                <h3>对应权益</h3>
                <p>{solution.benefits}</p>
              </div>
            </div>
          </div>
        ))}
      </div>
    </div>
  )
}

export default Thirteen
